<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="./stylesheets/style.css">
    <!-- Angular-->
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.min.js"></script>
    <title>Snack Bar</title>
    <style type="text/css">
        ul{list-style:none;}
    </style>
</head>
<body ng-controller="myCtrl">

<div class="navbar-wrapper">
      <div class="container">

        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/" ng-click = "getAll();">Snack Bar</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="/" ng-click = "getAll();">首页</a></li>
                <li><a href="/messages">留言</a></li>
                <li><a href="/tallybook">欠账本</a></li>
                <li><a href="/insert" ng-show="isAdmin">管理员</a></li>
                <li><a href="/contact">关于</a></li>
                <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                  <input  type="text" ng-model = "keyword" class="form-control search_query" placeholder="探索">
                <button type="submit" class="btn btn-default" ng-click= "search(keyword);"><span class="glyphicon glyphicon-search"></span></button>
              </div>        
            </form>
            <li><a href="/register" ng-show="showLogin">注册</a></li>
            <li><a href="/login" ng-show="showLogin">登录</a></li>
            <li><a>{{username}}</a></li>
            <li><a href="#" ng-click="logout();" ng-show="showLogout">退出</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
</div>

<div class="container-fluid snackcontainer">
  <div class="row">
    
    <div class="col-md-12 snackrow">
      <ul class="">
          <li ng-repeat="i in tasklist | limitTo : limit">
              <div class="col-xs-6 col-sm-4 col-md-4">
                  <div class="thumbnail">

                    <img ng-src="{{i.pic}}" class = "img-thumbnail img-snack" style="height:200px"/>
                    <hr/>
                      <div class="namediv">
                        <strong>{{i.name}}</strong>
                        <div class="gooddiv pricediv">
                          <img src="./images/good.jpg" class="imggood" ng-click= "addGood(i);">
                          <strong> {{i.loves==0?'':i.loves}} </strong>
                        </div>
                      </div> 
                      <div class="pricediv">
                      <p><strong>￥{{i.price.toFixed(1)}}</strong></p>
                      <p>
                        位于:{{i.address}}
                      </p>
                      <p>
                        {{i.description}}
                      </p>
                      </div>
                  </div>
              </div>
          </li>
      </ul>
      <div class="col-md-12 showMoreSnack">
        <p>
           <div ng-show="showMore">
              <button type="button" class="btn btn-primary showMoreButton" ng-click="showMoreSnack();">显示更多</button>
          </div>
        </p>
      </div>
    </div>
  </div>

</div>
<script>
    var app=angular.module("app",[], function () {
        console.log('started');
    });
    /*local json for test
    var myTaskList={
        "all":  [
      { title:"./images/1.jpg",
        loves:12,
        list:[{ "done":"false", "item":"明细1"},
            { "done":"false", "item":"明细2"},
            { "done":"false", "item":"明细3"},
            { "done":"false", "item":"明细43"}
        ]},

        { title:"./images/2.jpg",
          loves:12,
            list:[{ "done":"false", "item":"明细1"},
            { "done":"false", "item":"明细2"},
            { "done":"false", "item":"明细33"},
            { "done":"false", "item":"明细4"}
        ]},

    { title:"./images/3.jpg",
      loves:12,
            list:[{ "done":"false", "item":"明细1"},
        { "done":"false", "item":"明细25"},
        { "done":"false", "item":"明细3"},
        { "done":"false", "item":"明细4"}
    ]}
    ]
    };
  */
app.controller("myCtrl",function($scope,$http,$location){

    function loadingMore() {
      $scope.limit = 12;
      if ($scope.tasklist.length > $scope.limit) {
        $scope.showMore = true;
      } else {
        $scope.showMore = false;
      }
    };

    $http.get("/api/snack").success(function(response){
      $scope.tasklist = response;
      loadingMore();
    });

    $http.get("/session").success(function(response){
      if(response&&response.user&&response.user.name) {
        $scope.username = response.user.name;
        if (response.user.name=="Admin") {
          $scope.isAdmin = true;
        }
        $scope.showLogout = true;
        $scope.showLogin = false;
      } else {
        $scope.showLogin = true;
        $scope.showLogout = false;
      }
    });

    $scope.addGood = function(record){
    	 $http({
    	        method  : 'put',
    	        url     : '/api/snack/addGood/'+ record._id,
    	       // data    : record._id,  // pass in data as strings
    	        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
    	    })
    	        .success(function(data) {
    	            if (!data.success) {
    	            	alert("can not update snack love");
    	            } else {
    	                // if successful, bind success message to message
    	               // $scope.message = data.message;
    	                $http.get("/api/snack").success(function(response){
    	                    $scope.tasklist = response;
    	                  });
    	            }
    	        });
    };

	  $scope.getHot = function(){
      $scope.tabQuery = 'hot';
      $scope.order = "-loves";
      $http.get("/api/snack").success(function(response){
        $scope.tasklist = response;
        loadingMore();
      });
    };

    $scope.getFood = function(){
      $scope.order = '';
      searchByCategory('food');
      $scope.tabQuery = 'food';
    };

    $scope.getDrink = function(){
      $scope.order = '';
      searchByCategory('drink');
      $scope.tabQuery = 'drink';
    };

    $scope.getOther = function(){
      $scope.order = '';
      searchByCategory('other')
      $scope.tabQuery = 'other';
    };

    $scope.getAll = function(){
      $scope.order = '';
      $scope.tabQuery = '';
      loadingMore();
    };
	 $scope.logout = function(){
    	 $http({
 	        method  : 'get',
 	        url     : './logout',
 	       // data    : record._id,  // pass in data as strings
 	        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
 	    })
 	        .success(function(data) {

 	            if (!data.success) {
 	            	alert("can not logout");
 	            } else {
                  location.href = './login';
 	            }
 	        });
    };

    function searchByCategory(category){
      $http.get("/api/snack/search/"+category).success(function(response){
          $scope.tasklist = response;
          loadingMore();
      });
    };

	 $scope.search = function(keyword){
		 if(!keyword){
			 keyword = 'all';
	}	  
      $http.get("/api/snack/search/"+keyword).success(function(response){
          $scope.tasklist = response;
          loadingMore();
        });
    };
    $scope.showMoreSnack = function(){
      $scope.limit += 12;
      if ($scope.tasklist.length < $scope.limit) {
        $scope.showMore = false;
      }
    };

    $scope.isActive = function(category){
        return category===$scope.tabQuery;
    }

});
</script>

<!-- FOOTER -->
<footer class="footer">
  <p>&copy; 2015 Company, Inc. &middot; Powered By &middot; <a href="https://nodejs.org/">Nodejs</a></p>
</footer>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>